<template>
  <div class="app-container">
      <el-card class="box-card" style="height: 260px; margin-bottom: 30px">
          <div class="title">欢迎来到{{ app_title }}</div>
      </el-card>
      <avue-data-price :option="option"></avue-data-price>
  </div>
</template>

<script>
import { list as archivesList } from '@/api/archives/archives'
import { list as noticeList } from '@/api/archives/notice'
import { MODULE_DICTID, MODULE_ID } from '@/const/modules'
export default {
  name: 'Server',
  data() {
      return {
          option: {
              data: [
                  {
                      title: '案卷统计',
                      price: null,
                      // append: '1 / 天',
                      click: () => {
                          this.$router.push({
                              path: '/Marchives/archives'
                          })
                      },
                      list: [
                          '档案名称',
                          '程序类型',
                          '起火天气',
                          '起火地点'
                      ]
                  },
                  {
                      title: '询问统计',
                      price: null,
                      // append: '1 / 天',
                      click: () => {
                          this.$router.push({
                              path: '/Marchives/record',
                              query: {
                                  dictId: 2
                              }
                          })
                      },
                      list: [
                          '询问时间',
                          '询问地点',
                          '被询问人',
                          '询问笔录'
                      ]
                  },
                  {
                      title: '提取统计',
                      price: null,
                      // append: '1 / 天',
                      click: () => {
                          this.$router.push({
                              path: '/Marchives/collect',
                              query: {
                                  dictId: 3
                              }
                          })
                      },
                      list: ['提取人', '提取物', '证人', '当事人']
                  },
                  {
                      title: '照片统计',
                      price: null,
                      // append: '1 / 天',
                      click: () => {
                          this.$router.push({
                              path: '/Marchives/photo',
                              query: {
                                  dictId: 12
                              }
                          })
                      },
                      list: ['拍摄时间', '拍摄方向', '制作时间', '录音']
                  }
              ]
          }
      }
  },
  computed: {
      app_title() {
          return process.env.VUE_APP_TITLE
      },
      currentModule() {
          return (currentDictId) => {
              const currentModule = Object.entries(MODULE_DICTID).find(([key, value]) => value == currentDictId);
              const [moduleName,] = currentModule;
              const moduleId = MODULE_ID[currentDictId]
              return { moduleName, moduleId }
          }
      }
  },
  created() {
      this.getArchivesList()
      this.getNoticeList(MODULE_DICTID.note)
      this.getNoticeList(MODULE_DICTID.extract)
      this.getNoticeList(MODULE_DICTID.photo)
  },
  methods: {
      getArchivesList() {
          archivesList({ pageNum: 1, pageSize: 10 }).then(res => {
              // console.log(res)
              this.option.data[0].price = res.total
          })
      },
      getNoticeList(dictId) {
          /*
          key : dictId
          value: option.data 的 下标
          */
          const { moduleName, moduleId } = this.currentModule(dictId)
          const dictObj = {
              2: 1,
              3: 2,
              12: 3
          }
          noticeList({ moduleName, pageNum: 1, pageSize: 999, dictId, }).then(res => {
              let list = []
              res.rows.forEach(item => {
                  list.push(...item[moduleName + 'List'])
              })
              this.option.data[dictObj[dictId]].price = list.length
          })
      }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  &::before {
      content: "";
      position: absolute;
      top: 185px;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url(../assets/images/home.png);
      background-color: rgba(255, 255, 255, 0.5);
      /* 设置背景颜色为白色并设置透明度为 0.5 */
      opacity: 0.1;
  }
}

.box-card {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  box-shadow: 2px 3px 15px #eee;
}

.title {
  font-size: 26px;
  font-weight: bold;
  padding: 20px 0;
  color: #001e9e;
  font-size: 36px;
  // position: absolute;
  // bottom: 79%;
  z-index: 10;
  text-align: center;
}

::v-deep .data-price {
  & .el-col:not(.el-col:nth-child(4n-3)):not(.el-col:nth-child(4n)) {
      .item {
          margin: 0 20px;
      }
  }

  & .item {
      margin: 0;

      .body {
          &::before {
              display: none;
          }
      }

      .list {
          p {
              margin: 14px 0;
          }
      }
  }
}

.bg {
  position: absolute;
  top: 185px;
  left: 0;
  display: flex;
  justify-content: flex-end;
  opacity: 0.1;
}

img {
  // max-width: 90%;
  max-height: 100vh;
  width: 100%;
}
</style>
